<template>
	<div class="zhengtuojianhuo">
		<van-nav-bar :fixed="true" class="navBar" title="装车" left-arrow @click-left="$router.go(-1)"></van-nav-bar>



		<div class="zhuangcheWarp">
			 <div class="zhuangcheRow">
					<div class="zhuangcheLabel">出车登记号：</div>
					<van-field
             clearable
						 class="skuInput"
						 v-model="editForm.bill"
						 placeholder="请填写出车登记单号"
              @keyup="onEnter($event,do_inputspbarBill)"
					 />
			 </div>

        <!-- 新增清空选项 -->
      <div class="zhuangcheRow">
        <div class="zhuangcheLabel"></div>
        <van-checkbox v-model="clearBillAfterSave">确认后清空单号</van-checkbox>
      </div>


			 <div class="zhuangcheRow">
					<div class="zhuangcheLabel">出库容器号：</div>
					<van-field
             clearable
						 class="skuInput"
						 v-model="editForm.jhrq"
						 placeholder="请填写出库容器号"
             @keyup="onEnter($event,do_inputspbar)"
					 />
           <div class="searchBtn">
								<button :disabled="isdisabled"  @click.stop="_getRongQiAll()" >
									<van-icon name="ellipsis" color="#1989fa"  />
								</button>
						 </div>
			 </div>


       <div class="zhuangcheRow">
					<div class="zhuangcheLabel">门店名称：</div>
					{{editForm.storeid}} {{editForm.storename}}
			 </div>

			 <div class="zhuangcheRow">
					<div class="zhuangcheLabel">商品种数：</div>
					{{editForm.hzcount}}
			 </div>


			 <div class="zhuangcheRow">
					<div class="zhuangcheLabel">托盘总数量：</div>
					{{editForm.totqty}}
			 </div>

			 <div class="zhuangcheRow">
					<div class="zhuangcheLabel">件数：</div>
					{{editForm.pack}}
			 </div>

			 <div class="zhuangcheRow">
					<div class="zhuangcheLabel">散数：</div>
					{{editForm.qty}}
			 </div>
		</div>



		<table-popup
			v-model="isSkuVisible"
			title="商品列表"
			:table-data="tableData"
			:columns="columns"
			@select="selectClick"
		/>

		<!-- 容器列表弹窗 -->
		<table-popup
			v-model="isRongQiVisible"
			title="容器列表"
			:table-data="rongqiDataAll"
			:columns="rongqiColumns"
			@select="selectRongQiClick"
		/>



		<div class="skuBtn">
			<van-button type="info" :disabled="isdisabled" @click="chuCheBillBtn()">出车单号</van-button>
			<van-button type="info" :disabled="isdisabled" @click="zhuangCheSearchBtn()">装车查询</van-button>

		</div>

		<div class="skuBtn">
			<van-button type="info" :disabled="isdisabled" @click="rongqiBtn()">出车容器</van-button>
			<van-button type="info" :disabled="isdisabled" @click="saveZhuangCheBtn()">确认</van-button>
		</div>



	</div>
</template>

<script>
import TablePopup from '@/components/TablePopup.vue'

export default {
    name: 'zhuangche',
    components: {
        TablePopup
    },
    data() {
    return {
			editForm:{
				bill:'',  ////D00000002  D00000001
				jhrq:'',
				hzcount:'',
				totqty:'',
				pack:'',
				qty:'',
        storeid:'',
        storename:'',
			},
			isdisabled:false,
			tableData:[
				{
					bill:'',
					chepaihao:'',
					siji:'',
					cxbm:'',
					cxdesc:'',
					clsjxm:'',
				}
			],
			rongqiData:{},
      rongqiDataAll:[],
			isSkuVisible:false,
			index:0,
      clearBillAfterSave: false, // 新增清空选项的控制变量
      columns: [
        { prop: 'bill', label: '出车登记单号', width: '150' },
        { prop: 'chepaihao', label: '车牌号', width: '120' },
        { prop: 'siji', label: '司机编码', width: '100' },
        { prop: 'cxbm', label: '车型编码', width: '100' },
        { prop: 'cxdesc', label: '车型名称', width: '120' },
        { prop: 'clsjxm', label: '司机名称', width: '120' }
      ],
      isRongQiVisible: false,
      rongqiColumns: [
        { prop: 'jhrq', label: '容器标签', width: '150' },
        { prop: 'storeid', label: '门店号', width: '100' },
        { prop: 'storename', label: '门店名称', width: '100' },
        { prop: 'sp', label: '商品', width: '200' },
        { prop: 'tpack', label: '总箱数', width: '100' },
        { prop: 'tqty', label: '总散数', width: '100' },
        { prop: 'fh', label: '复核人', width: '100' },
        { prop: 'jh', label: '拣货人', width: '100' }
      ]
		};
  },
	computed: {
	   ryuser: function(){
	     return this.GWO(true).gUSER;
	   }
	},
  methods: {
    do_inputspbarBill(pmtxt){
			console.log(pmtxt)  //扫描枪获取的参数
			this.editForm.bill = pmtxt
			this.chuCheBillBtn()

		},
    do_inputspbar(pmtxt){
			console.log(pmtxt)  //扫描枪获取的参数
			this.editForm.jhrq = pmtxt
			this.rongqiBtn()
		},
		rongqiBtn(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_fenbo',
				'i':this.FNULLE([
				'opmode','ZC_qryjhrq',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'jhrq',_self.editForm.jhrq,
				])
				},'查询出库容器号',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					// _self.tableData = rtn_json_obj
					console.log("查询出库容器号")
					console.log(rtn_json_obj)
					// _self.tableData = rtn_json_obj
					if(rtn_json_obj.length > 0){
						_self.editForm.hzcount = rtn_json_obj[0].hzcount
						_self.editForm.totqty  = rtn_json_obj[0].totqty
						_self.editForm.pack 	 = rtn_json_obj[0].pack
						_self.editForm.qty 		 = rtn_json_obj[0].qty
						_self.editForm.storeid 		 = rtn_json_obj[0].storeid
            _self.editForm.storename 		 = rtn_json_obj[0].storename
					}else{
						_self.$toast.fail('暂无查询出库容器')
					}
				}
			});
		},
		chuCheBillBtn(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_fenbo',
				'i':this.FNULLE([
				'opmode','ZC_qrybill',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'bill',_self.editForm.bill,
				])
				},'查询出车登记单号',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.tableData = rtn_json_obj
					console.log("查询出车登记单号")
					console.log(rtn_json_obj)
					_self.tableData = rtn_json_obj
					if(_self.tableData.length > 0){
						_self.isSkuVisible = true
					}else{
						_self.$toast.fail('暂无出车登记单')
					}
				}
			});
		},
		selectClick(row){
			console.log(row)
			this.editForm.bill = row.bill
			this.isSkuVisible = false
		},
		saveZhuangCheBtn(){
			console.log("传值")
			console.log(this.editForm)
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_fenbo',
					'i':this.FNULLE([
					'opmode','ZC_qr_jhrq',
					'kqid', this.ryuser.kqid,
					'czyid',this.ryuser.operatorid,
					'bill',this.editForm.bill,
					'jhrq', this.editForm.jhrq,
					'storeid', this.editForm.storeid,
				])
				}, '确认拣货',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					// _self.skuData = rtn_json_obj
					console.log("得到确认拣货")
					console.log(rtn_json_obj[0])
					if(rtn_json_obj[0].ret_ret == '-1'){
						_self.$toast(rtn_json_obj[0].ret_mess)
					}else{
						_self.$toast(rtn_json_obj[0].ret_mess)
                          // 根据checkbox状态决定是否清空数据
            if(_self.clearBillAfterSave) {
                _self.editForm.bill = ''  // 只清空单号
            }
						_self.editForm.hzcount = ''
						_self.editForm.totqty  = ''
						_self.editForm.pack 	 = ''
						_self.editForm.qty 		 = ''
						_self.editForm.storeid 	= ''
						_self.editForm.jhrq 		= ''
            _self.editForm.storename 	= ''
					}
				}
			});
		},
		zhuangCheSearchBtn(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_fenbo',
				'i':this.FNULLE([
				'opmode','ZC_jsqry_bill',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'bill',_self.editForm.bill,
				])
				},'查询出车登记单号',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.tableData = rtn_json_obj
					console.log("查询出车登记单号")
					console.log(rtn_json_obj)
					if(rtn_json_obj.length >0){
						_self.$router.push({ path: '/zhuangcheSon', query: { bill: _self.editForm.bill } })
					}else{
						_self.$toast.fail('暂无出车登记单')
					}
				}
			});
		},
    _getRongQiAll(){
      var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_fenbo',
				'i':this.FNULLE([
				'opmode','ZCPS_W_qryjhrq',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				])
				},'查询出车容器号',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					// _self.tableData = rtn_json_obj
					console.log("查询出车容器号")
					console.log(rtn_json_obj)
          if(rtn_json_obj.length > 0){
            _self.rongqiDataAll = rtn_json_obj
            _self.isRongQiVisible = true // 显示容器列表弹窗
          }else{
            _self.$toast.fail('暂无出车容器')
          }
				}
			});
    },
    selectRongQiClick(row) {
      this.editForm.jhrq = row.jhrq
      this.isRongQiVisible = false
      this.rongqiBtn() // 选择后自动查询容器详情
    }
  },
  mounted() {

  },
};
</script>

<style lang="scss" scoped>
	// 引入公共样式
	@import '@/assets/css/base.scss';
	@import '@/assets/css/input.scss';
	div.zhengtuojianhuo{
		padding-top: 50px;
	}


	div.zhuangcheWarp{
		width:100%;
		background: #EBF3FF;
		padding:10px;
		box-sizing: border-box;
		div.zhuangcheRow{
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			font-weight: bold;
			font-size: 20px;
			div.zhuangcheLabel{
				width: 140px;
				// font-weight: bold;
				// font-size: 20px;
			}
		}
	}

</style>
